<template>
  <div :id="id">
  </div>
</template>
<script>
export default {
  props: {
    id: {
      type: String,
      required: true
    },
    option: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  mounted() {
    this.Chart = this.$echarts.init(document.getElementById(this.id));
    window.onresize = () => {
      this.Chart.resize();
    };
    this.Chart.setOption(this.option, true);
  },
  watch: {
    option: {
      handler(newVal, oldVal) {
        if (this.Chart) {
          if (newVal) {
            this.Chart.setOption(newVal, true);
          } else {
            this.Chart.setOption(oldVal, true);
          }
        }
      },
      deep: true 
    }
  }
};
</script>

<style lang="stylus" scoped>

</style>